<template>
	<view >
		<view
			class="head-bg " 
			:style="{
				'background': `url(${getImg('myFile-bg')}) no-repeat center top`,
			}"
		>
			<head-nav
				bgColor="rgba(0,0,0,0)" 
				title="我的档案"
			>
			</head-nav>
			<view class="tabs-box pad-l24">
				<u-tabs
					:list="tabsList"
					lineColor="#FF7171"
					:current="tabsCurrent"
					lineWidth="64rpx"
					lineHeight="10prx"
					:activeStyle="{
						color: '#111111',
						transform: 'scale(1.05)',
						fontWeight: 'bold'
					}"
					:inactiveStyle="{
						color: '#333333',
						fontSize: '32rpx'
					}"
					@change="tabsChange"
				></u-tabs>
			</view>
			<view class="list-box">
				<view 
					class="list-li mar-t16 bg-f  pad-t32" 
					v-for="(item, index) in list"
					:key="index"
				>
					<view class="padlr24">
						<view class="li-head flex-a">
							<u--image
								:showLoading="true" 
								:src="getImg('vip-grid-icon1')"
								width="84rpx" 
								height="84rpx"
							></u--image>
							<view class="li-tit pad-l14">
								<view class="block-tit">护理跟进日记</view>
								<view class="">
									<text>2024-10-20 15:30</text>
									<text class="mar-l16">记录人：丫丫</text>
								</view>
							</view>
						</view>
						<u-line margin="28rpx 0 0"></u-line>
						<view 
							class="cell-box pad-b20" 
							:style="{
								'height': !unfoldSelect.includes(index) ? '424rpx' : 'auto'
							}"
						>
							<view 
								class="li-cell mar-t20 " 
								v-for="(cItem, cIndex) in cellList"
								:key="cIndex"
							>
								<view class="cell-tit">{{ cItem.label }}</view>
								<view class="cell-val mar-t10 ">
									<view class="img-box flex flex-wrap" v-if="tabsCurrent == 1 && cItem.type == 'arr'">
										<view 
											v-for="(imgItem, imgIndex) in 7"
											:key="imgIndex"
											class="img-li mar-t14"
										>
											<u--image
												:showLoading="true" 
												:src="getImg('vip-grid-icon1')"
												width="126rpx" 
												height="126rpx"
											></u--image>
										</view>
									</view>
									<view v-else>
										叶多多
									</view>
								</view>
								
							</view>
						</view>
					</view>
					<view class="li-fot flex-center h-80" @click="onSelect(index)">
						<view class="mar-r6">
							{{ unfoldSelect.includes(index) ? '收起' : '展开' }}
						</view>
						<u-icon
							:name="!unfoldSelect.includes(index) ? 'arrow-down' : 'arrow-up'"
							size="16rpx"
							bold
						></u-icon>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script> // 我的档案
	export default {
		data() {
			return {
				tabsCurrent: 0,
				tabsList: [
					{
						name: '全部',
					}, 
					{
						name: '皮肤档案',
					}, 
					{
						name: '顾问跟进日志',
					}, 
					{
						name: '护理跟进日志',
					}, 
				],
				list: [1,1,],
				cellList: [
					{
						label: "皮肤检测图片",
						key: "",
						type: "arr"
					},
					{
						label: "顾客姓名",
						key: ""
					},
					{
						label: "本次服务项目",
						key: ""
					},
					{
						label: "顾客近况",
						key: ""
					},
					{
						label: "铺垫情况",
						key: ""
					},
					{
						label: "护理细节",
						key: ""
					},
					{
						label: "顾客反馈",
						key: ""
					},
					{
						label: "护理前",
						key: ""
					},
					{
						label: "护理后",
						key: ""
					},
				],
				unfoldSelect: [],
			}
		},
		onLoad() {
			
		},
		methods: {
			onSelect(index) {
				let indexOf = this.unfoldSelect.indexOf(index)
				if(~indexOf) {
					this.unfoldSelect.splice(indexOf, 1)
				}else {
					this.unfoldSelect.push(index)
				}
			},
			tabsChange(eve) {
				this.tabsCurrent = eve.index;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.li-fot {
		background: #FFFFFF;
		box-shadow: 0rpx -2rpx 6rpx 0rpx rgba(0,0,0,0.05);
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #999999;
	}
	.cell-box {
		overflow: hidden;
		.cell-tit {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
		}
		.cell-val {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #111111;
			.img-box {
				.img-li {
					width: 20%;
				}
			}
		}
	}
	.list-li {
		.li-tit {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #777777;
		}
	}
	.head-bg {
		min-height: 264rpx;
		background-size: 100% 264rpx !important;
	}
</style>
